
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="js/citychoice.js"></script>
<script>
$(function(){
var test2=new Vcity.CitySelector({input:'citySelect'});
});

</script>

<style><!--
.citySelector{  font:12px/1.5 tahoma,arial,\5b8b\4f53; background: #fff; text-align:left; }
        .cityslide {width:250px; list-style:none; margin:0; padding:0; border: 1px solid #85BEE5; border-right-color: #3485C0; border-bottom-color: #3485C0;box-shadow: 2px 2px 3px rgba(0,0,0,0.3);  margin-top:-2px;}
        .cityslide li { list-style:none; overflow:hidden;  height:16px; padding:4px 5px;}
        .cityslide li.on{background:#9CD9FF; color:#fff;}
        .cityslide li b { font-weight:normal;}
        .cityslide li.empty{ background: #fff2e8; color: #666;}
        .cityslide li.empty em{color: red; font-style:normal;}
        .cityname {float:left;}
        .cityspell {float:right;}
        .cityBox{ width: 320px; border: 1px solid #85BEE5; overflow: hidden; /*box-shadow: 2px 2px 3px rgba(0,0,0,0.3); */}
        .cityBox ul{ margin: 0; padding: 0; overflow: hidden;}
        .cityBox ul li{ float: left; list-style: none; padding: 2px 4px; border: 1px solid #85BEE5; cursor:pointer; margin-left: 4px; display: inline; background: #E1EFFE;}
        .cityBox ul li.on{ background: #fff; border-bottom-color:#fff; position: relative;}
        .hide{ display: none;}
        p.tip{ color:#666; line-height: 20px; padding: 5px; margin: 0; text-indent: 3px;}
        .hotCity{ border-top: 1px solid #85BEE5; margin-top: -1px; clear:left; overflow: hidden; padding-bottom: 5px; padding-top: 5px; _margin-bottom:8px;}
        .cityTab{overflow: hidden;}
        .cityTab dl{ margin:0; padding: 0; overflow: hidden; }
        .cityTab dl dt{float: left; padding-left: 3px;color: #F30;text-indent: 5px; font-family: "Lucida console","consolas","courier new";line-height: 22px; font-size: 14px; width: 20px;}
        .cityTab dl dd{ margin-left:2px; float:left; width: 290px;}
        .cityTab dl dd a{ padding-left:5px; width:66px; line-height: 22px; display: inline-block; color: #000; text-decoration: none;}
        .cityTab dl dd a:hover{text-decoration:underline; color: red}

        .cityinput{
            border-width: 1px;
            border-style: solid;
            border-color: #666 #ccc #ccc #666;
            height: 24px;
            line-height: 24px;
            width: 175px;
            font-size: 12px;
            padding-left: 2px;
            background: url(http://img02.taobaocdn.com/tps/i2/T1EPyLXm0hXXXXXXXX-200-100.png) no-repeat 150px 5px;
            }
--></style>

</head>
<body>
<input id="citySelect" class="cityinput" type="text" value="城市名">
</body>


